﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="~/lib/hiprint/css/hiprint.css" rel="stylesheet" />
    <link href="~/lib/hiprint/css/print-lock.css" rel="stylesheet" />
    <link href="~/lib/hiprint/content/bootstrap.min.css" rel="stylesheet">
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/hiprint/content/bootstrap.min.js"></script>
    <style>
        .hinnn-layout,
        .hinnn-layout * {
            box-sizing: border-box;
        }


        .hinnn-layout {
            display: flex;
            flex: auto;
            flex-direction: column;
        }

            .hinnn-layout.hinnn-layout-has-sider {
                flex-direction: row;
            }

        .hinnn-layout-sider {
            display: flex;
            flex-direction: row;
            position: relative;
        }

        .hinnn-layout-content {
            flex: auto;
        }

        .hinnn-header {
            position: relative;
            z-index: 1030;
            display: block;
        }


        .wrapper {
            min-height: 100%;
        }

        .height-100-per {
            height: 100%;
        }
    </style>
</head>

<body>
    <layout class="layout hinnn-layout hinnn-layout-has-sider height-100-per" style="background:#fff;">
        <content class="hinnn-layout-content" style="border-left:1px solid #e8e8e8;">
            <div class="container-fluid height-100-per print-content">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="row">
                            <div class="col-sm-3 col-md-2" style="padding-right:0px;">

                                <div class="rect-printElement-types hiprintEpContainer">
                                    <ul class="hiprint-printElement-type">

                                        <li>
                                            <span class="title"><code>拖拽列表</code></span>
                                            <ul>
                                                <li>
                                                    <a class="ep-draggable-item" tid="testModule.text" style="">

                                                        <span class="glyphicon glyphicon-text-width"
                                                              aria-hidden="true"></span>
                                                        <span class="glyphicon-class">文本</span>
                                                    </a>
                                                </li>

                                                <li>
                                                    <a class="ep-draggable-item" tid="testModule.image" style="">
                                                        <span class="glyphicon glyphicon-picture"
                                                              aria-hidden="true"></span>
                                                        <span class="glyphicon-class">图片</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="ep-draggable-item" tid="testModule.longText">
                                                        <span class="glyphicon glyphicon-subscript"
                                                              aria-hidden="true"></span>
                                                        <span class="glyphicon-class">长文</span>


                                                    </a>
                                                </li>

                                                <li>
                                                    <a class="ep-draggable-item" tid="testModule.tableCustom" style="">
                                                        <span class="glyphicon glyphicon-th" aria-hidden="true"></span>
                                                        <span class="glyphicon-class">表格</span>
                                                    </a>
                                                </li>

                                                <li>
                                                    <a class="ep-draggable-item" tid="testModule.html">
                                                        <span class="glyphicon glyphicon-header"
                                                              aria-hidden="true"></span>
                                                        <span class="glyphicon-class">html</span>
                                                    </a>
                                                </li>

                                            </ul>
                                        </li>
                                        <li>
                                            <span class="title">辅助</span>
                                            <ul>
                                                <li>
                                                    <a class="ep-draggable-item" tid="testModule.hline" style="">

                                                        <span class="glyphicon glyphicon-resize-horizontal"
                                                              aria-hidden="true"></span>
                                                        <span class="glyphicon-class">横线</span>
                                                    </a>
                                                </li>

                                                <li>
                                                    <a class="ep-draggable-item" tid="testModule.vline" style="">
                                                        <span class="glyphicon glyphicon-resize-vertical"
                                                              aria-hidden="true"></span>
                                                        <span class="glyphicon-class">竖线</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="ep-draggable-item" tid="testModule.rect">
                                                        <span class="glyphicon glyphicon-unchecked"
                                                              aria-hidden="true"></span>
                                                        <span class="glyphicon-class">矩形</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="ep-draggable-item" tid="testModule.oval">
                                                        <span class="glyphicon glyphicon-record"
                                                              aria-hidden="true"></span>
                                                        <span class="glyphicon-class">椭圆</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>

                            </div>
                            <div class="col-sm-9 col-md-10">
                                <div class="hiprint-toolbar" style="margin-top:15px;">
                                    <ul>
                                        <li><a class="hiprint-toolbar-item" onclick="setPaper('A3')">A3</a></li>
                                        <li><a class="hiprint-toolbar-item" onclick="setPaper('A4')">A4</a></li>
                                        <li><a class="hiprint-toolbar-item" onclick="setPaper('A5')">A5</a></li>
                                        <li><a class="hiprint-toolbar-item" onclick="setPaper('B3')">B3</a></li>
                                        <li><a class="hiprint-toolbar-item" onclick="setPaper('B4')">B4</a></li>
                                        <li><a class="hiprint-toolbar-item" onclick="setPaper('B5')">B5</a></li>

                                        <li>
                                            <a class="hiprint-toolbar-item">
                                                <input type="text" id="customWidth"
                                                       style="width: 50px;height: 19px;border: 0px;"
                                                       placeholder="宽/mm" />
                                            </a>
                                        </li>
                                        <li>
                                            <a class="hiprint-toolbar-item">
                                                <input type="text" id="customHeight"
                                                       style="width: 50px;height: 19px;border: 0px;"
                                                       placeholder="高/mm" />
                                            </a>
                                        </li>

                                        <li>
                                            <a class="hiprint-toolbar-item"
                                               onclick="setPaper($('#customWidth').val(),$('#customHeight').val())">自定义</a>
                                        </li>
                                        <li><a class="hiprint-toolbar-item" onclick="rotatePaper()">旋转</a></li>
                                        <li><a class="hiprint-toolbar-item" onclick="clearTemplate()">清空</a></li>

                                        <li>
                                            <a class="btn hiprint-toolbar-item " style="color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;" id="A4_preview">快速预览</a>
                                        </li>
                                        <li>
                                            <a id="A4_directPrint" class="btn hiprint-toolbar-item " style="color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;">打印</a>
                                        </li>

                                    </ul>
                                    <div style="clear:both;"></div>
                                </div>
                                <div id="hiprint-printTemplate" class="hiprint-printTemplate" style="margin-top:20px;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </content>
        <sider class="hinnn-layout-sider" style="">
            <div class="container height-100-per" style="width:250px;">
                <div class="row">
                    <div class="col-sm-12">
                        <div id="PrintElementOptionSetting" style="margin-top:10px;"></div>
                    </div>
                </div>
            </div>
        </sider>
    </layout>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document" style="width: 825px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">打印预览</h4>
                </div>

                <div class="modal-body">
                    <button type="button" class="btn btn-danger" id="A4_printByHtml">打印</button>
                    <div class="prevViewDiv"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                </div>
            </div>
        </div>
    </div>
    <!--[[ 测试专用  单独使用无需引入  -->
    <script src="~/lib/hiprint/custom_test/custom-etype-provider.js"></script>
    <script src="~/lib/hiprint/custom_test/custom-print-json.js"></script>
    <script src="~/lib/hiprint/custom_test/print-data.js"></script>
    <!--测试专用  单独使用无需引入 ]]  -->
    <!--单独使用无需引入  -->
    <script src="~/lib/hiprint/polyfill.min.js"></script>
    <script src="~/lib/hiprint/plugins/jquery.minicolors.min.js"></script>
    <script src="~/lib/hiprint/plugins/JsBarcode.all.min.js"></script>
    <script src="~/lib/hiprint/plugins/qrcode.js"></script>
    <script src="~/lib/hiprint/hiprint.bundle.js"></script>
    <script src="~/lib/hiprint/plugins/jquery.hiwprint.js"></script>
    <script>
        var hiprintTemplate;
        $(document).ready(function () {
            //初始化打印插件
            hiprint.init({
                providers: [new customElementTypeProvider()]
            });
            //hiprint.PrintElementTypeManager.build('.hiprintEpContainer', 'testModule');
            //设置左侧拖拽事件
            hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'));

            hiprintTemplate = new hiprint.PrintTemplate({
                template: customPrintJson,
                settingContainer: '#PrintElementOptionSetting',
                paginationContainer: '.hiprint-printPagination'
            });
            //打印设计
            hiprintTemplate.design('#hiprint-printTemplate');
            documentCode = getQueryParam('id');
            console.log("打印中查看单据编码：", documentCode);
            function getQueryParam(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return decodeURIComponent(r[2]);
                return null;
            }
            // 使用$.ajax获取接口数据
            $.ajax({
                //url: 'http://localhost:5234/api/SaleOrder/GetSaleOrderDetail',
                url: "@ViewBag.BaseUrl/T7/SaleOrder/GetSaleOrderDetail",
                type: 'GET',
                data: { DocumentCode: documentCode },
                dataType: 'json',
                success: function (response) {
                    if (response.code === 210) {
                        var printData = response.data;
                        // 这里可以根据需要对printData进行进一步处理或传递给打印函数
                        // 例如，重新定义打印相关按钮的点击事件处理函数，使用新获取的数据
                        $('#A4_preview').click(function () {
                            $('#myModal .modal-body .prevViewDiv').html(hiprintTemplate.getHtml(printData))
                            $('#myModal').modal('show')
                        });
                        $('#A4_directPrint').click(function () {
                            hiprintTemplate.print(printData);
                        });
                        $('#A4_printByHtml').click(function () {
                            hiprintTemplate.printByHtml($('#myModal .modal-body .prevViewDiv'));
                        })
                    } else {
                        console.log('获取数据失败:', response.msg);
                    }
                },
                error: function (xhr, status, error) {
                    console.error('请求出错:', error);
                }
            });
        });

        //调整纸张
        var setPaper = function (paperTypeOrWidth, height) {
            hiprintTemplate.setPaper(paperTypeOrWidth, height);
        }
        //旋转
        var rotatePaper = function () {
            hiprintTemplate.rotatePaper();
        }
        var clearTemplate = function () {
            hiprintTemplate.clear();
        }

    </script>

    <script>
        $(document).ready(function () {
            //设置左侧拖拽事件
            var hiprintTemplate_bill = new hiprint.PrintTemplate({
                template: JSON.parse($('#textarea_bill').val()),
                settingContainer: '#PrintElementOptionSetting'
            });
            //打印设计
            hiprintTemplate_bill.design('#hiprint-printTemplate_bill');

            $('#bill_preview').click(function () {
                $('#myModal .modal-body .prevViewDiv').html(hiprintTemplate_bill.getHtml(printData))
                $('#myModal').modal('show')
            });
            $('#bill_print').click(function () {
                hiprintTemplate_bill.print(printData);
            });
        });


    </script>
</body>

</html>